<template>
  <div class="play_page">
   <div class="fnreturn" >
      <span class="return_left iconfont" @click="fnreturngo" >&#xe625;</span>
      <span>{{song_name}}</span>
<!--      <span>{{index.singer_name}}</span>-->
      <span class="attention iconfont">&#xe60f;</span>
    </div>
    <div class="bofanglan" style="padding:10px 0;margin-bottom: 2rem" >
       <aplayer autoplay :music="musicList" class="bofangqi">
       </aplayer>
    </div>


  </div>

</template>

<script>
  import VueAplayer from 'vue-aplayer';
import aplayer from "vue-aplayer";
  export default {
      name:'play_page',
      url:'songerplay.song_download_url',
      components: {
    //别忘了引入组件
       'a-player': VueAplayer,
        aplayer: aplayer
  },
      data(){
          return{
              songerplay:'',
              song_id:this.$route.query.id,
              song_name:this.$route.query.song_name,
              song_url:this.$route.query.song_url,
              singer_name:this.$route.query.singer_name,

                musicList: {

                  title: this.$route.query.song_name,
                  author: this.$route.query.singer_name,
                  url: this.$route.query.song_url,
                  pic: "",
                  lrc: "[00:00.00]lrc here\n[00:01.00]aplayer"
          }

          }
      },
      computed: {
    url() {
      return this.url;
    }
  },
      methods:{
          fnreturngo(){
              if(true){
                  this.$router.go(-1)
              }
          },


          getsinger_des(){

            this.$http.get(this.$store.state.baseUrl+"/songlist/songlistinfo/api/?songlist_id="+this.$route.query.id)
            // 成功的回调
            .then((res)=>{
                this.songerplay=res.data
                console.log('songerplay')
            })
            .catch((res)=>{
                console.log("失败的回调",res)
            })
        },

      },mounted() {
          // this.getsinger_des();
          this.goTosongplay();

            this.musicList = {
              title: this.song_name,
              author: this.singer_name,
              url: this.song_url,
              pic: "",
              lrc: "[00:00.00]lrc here\n[00:01.00]aplayer"

          }
      },
  }
</script>


<style scoped>
  .play_page{
    height: 37.5rem;
    width: 100%;
  }
  .fnreturn {
    width: 100%;
    /*height: 60px;*/
    background: #f1f1f1;
    margin-top: 0;
    position:fixed;
    top:0;
    font-size: 1.2rem;
    font-weight: 300;
    color: gray;
    /*line-height: 4rem;*/
    line-height: 3.75rem;
    z-index: 10000;
  }
  .return_left{
    padding-left: 2rem;
  }
  .attention{
    padding-left: 10rem;
  }
.play_page{
  width: 100%;
  height: 40rem;
  background-image: url(https://p1.music.126.net/tu4ON-DsY1SAJIL-JInuqw==/109951164456255025.jpg?param=140y140) ;
  background-repeat: no-repeat;
  background-size: cover;
}
.bofanglan{
  /*margin-bottom: 2rem;*/
  position: absolute;
  /*left: 0;*/
  bottom: 4rem;
  /*background: red;*/
}
.bofangqi{
  width: 23rem;
  background: skyblue;
}

  @font-face {
  font-family: 'iconfont';  /* project id 1482310 */
  src: url('//at.alicdn.com/t/font_1482310_vi9nci9xgb9.eot');
  src: url('//at.alicdn.com/t/font_1482310_vi9nci9xgb9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1482310_vi9nci9xgb9.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1482310_vi9nci9xgb9.woff') format('woff'),
  url('//at.alicdn.com/t/font_1482310_vi9nci9xgb9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1482310_vi9nci9xgb9.svg#iconfont') format('svg');
}
  .iconfont {
    font-family: "iconfont" !important;
    /* font-size: 30rem; */
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.1rem;
    -moz-osx-font-smoothing: grayscale;
  }

</style>

